<template>
  <div class="web_app">
    <div class="table_header">
      <vxe-toolbar ref="xToolbar" custom print import export zoom custom :refresh="{query: findList}">
        <template #buttons #tools>
            <vxe-button status="primary" icon="el-icon-plus" @click="insertEvent()">新增</vxe-button>
        </template>
      </vxe-toolbar>         
    </div>
    <div class="table_contert">
       <vxe-table
        :loading="loading"
        show-overflow
        :header-row-style="headerCellClassName1"
        highlight-hover-row
        ref="xTable"
        border="inner"
        height="600"
        width="100%"
        header-align="left"
        :print-config="{}"
        :import-config="{}"
        :export-config="{}"
        :data="tableData"
        @cell-dblclick="cellDBLClickEvent"
        >
        <vxe-column type="seq" field="ID" title="ID"></vxe-column>
        <vxe-column field="sex"  title="性别" :formatter="formatterSex" sortable :filters="[{label: '男', value: '1'}, {label: '女', value: '0'}]" :filter-multiple="true"></vxe-column>
        <vxe-column field="age" title="年龄" :filters="[{ data: '' }]" :filter-method="filterAgeMethod" sortable>
          <template #filter="{ $panel, column }">
            <el-input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)"></el-input>
            <div class="time_search_text" style="padding: 5px;">
              <p>例：输入格式如下</p>
              <p>月：201801-201805</p>
              <p>年：2017-2018</p>
              <p>同月：201601/201801</p>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="date" title="日期" sortable  :filters="[{data: ''}]" :filter-method="customDateFilterMethod">
            <template #filter="{ $panel, column }">
              <vxe-input type="date" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请选择" clearable transfer></vxe-input>
            </template>
        </vxe-column>
        <vxe-column field="address" title="Address" show-overflow sortable :filters="[{ data: '' }]" :filter-method="filterRoleMethod">
            <template #filter="{ $panel, column }">
              <vxe-select class="my-select" placeholder="请选择" size="medium" clearable v-model="option.data" v-for="(option, index) in column.filters" :key="index" @change="$panel.changeOption($event, !!option.data, option)">
                <vxe-option v-for="(label, cIndex) in addressList" :key="cIndex" :value="label" :label="label"></vxe-option>
              </vxe-select>
            </template>          
        </vxe-column>
        <vxe-column title="操作" show-overflow>
            <template #default="{ row }">
            <vxe-button
                status="success"
                icon="el-icon-edit"
                @click="editEvent(row)"
            >编辑</vxe-button>
            <vxe-button
                status="danger"
                icon="el-icon-delete"
                @click="removeEvent(row)"
            >删除</vxe-button>
            </template>
        </vxe-column>
       </vxe-table>
    </div>
    <div class="table_form">
        <vxe-modal v-model="showEdit" :title="selectRow ? '编辑&保存' : '新增&保存'" width="800" min-width="600" min-height="300" :loading="submitLoading" resize destroy-on-close>
          <template #default>
            <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
              <vxe-form-item title="Basic information" title-align="left" :title-width="200" :span="24" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
              <vxe-form-item field="name" title="Name" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-input v-model="data.name" placeholder="请输入名称"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item field="nickname" title="Nickname" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-input v-model="data.nickname" placeholder="请输入名称"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item field="role" title="Role" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-input v-model="data.Role" placeholder="请输入角色"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item field="sex" title="Sex" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-select v-model="data.sex" transfer>
                    <vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item field="age" title="Age" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-input v-model="data.age" type="number" placeholder="请输入年龄"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item field="flag1" title="是否单身" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-radio-group v-model="data.flag1">
                    <vxe-radio label="Y" content="是"></vxe-radio>
                    <vxe-radio label="N" content="否"></vxe-radio>
                  </vxe-radio-group>
                </template>
              </vxe-form-item>
              <vxe-form-item field="checkedList" title="可选信息" :visible-method="visibleMethod" :span="24" :item-render="{}">
                <template #default="{ data }">
                  <vxe-checkbox-group v-model="data.checkedList">
                    <vxe-checkbox label="1" content="运动、跑步"></vxe-checkbox>
                    <vxe-checkbox label="2" content="听音乐"></vxe-checkbox>
                    <vxe-checkbox label="3" content="爬山"></vxe-checkbox>
                    <vxe-checkbox label="4" content="吃美食"></vxe-checkbox>
                  </vxe-checkbox-group>
                </template>
              </vxe-form-item>
              <vxe-form-item title="Other information" title-align="left" :title-width="200" :span="24" :title-prefix="{message: '请填写必填项', icon: 'fa fa-info-circle'}"></vxe-form-item>
              <vxe-form-item field="num" title="Number" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-input v-model="data.num" type="number" placeholder="请输入数值"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item field="date3" title="Date" :span="12" :item-render="{}">
                <template #default="{ data }">
                  <vxe-input v-model="data.date3" type="date" placeholder="请选择日期" transfer></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item field="address" title="Date" :span="24" :item-render="{}" :title-suffix="{message: '提示信息！！', icon: 'fa fa-question-circle'}">
                <template #default="{ data }">
                  <vxe-textarea v-model="data.address" :autosize="{minRows: 2, maxRows: 4}"></vxe-textarea>
                </template>
              </vxe-form-item>
              <vxe-form-item align="right" title-align="left" :span="24">
                <template #default>
                  <vxe-button type="submit" status="primary" size="medium">提交</vxe-button>
                  <vxe-button type="reset">重置</vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
          </template>
        </vxe-modal>
    </div>
    <div class="table_page">
          <vxe-pager
            background
            :loading="loading"
            :current-page.sync="page5.currentPage"
            :page-size.sync="page5.pageSize"
            :total="page5.totalResult"
            @page-change="handlePageChange1"
            :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
          </vxe-pager>
    </div>
  </div>
</template>

<script>
  import XEUtils from 'xe-utils'
  export default {
          data () {
            return {
              addressList: ['Shenzhen', 'Guangzhou', 'Shanghai','xinyi','maoming','huizhou','dongguan'],
              value11: null,
              loading: false,
              submitLoading: false,
              tableData: [], 
              selectRow: null,
              showEdit: false,
              sexList: [
                { label: '女', value: '0' },
                { label: '男', value: '1' }
              ],
              formData: {
                name: null,
                nickname: null,
                role: null,
                sex: null,
                age: null,
                num: null,
                checkedList: [],
                flag1: null,
                date3: null,
                address: null
              },
              formRules: {
                name: [
                  { required: true, message: '请输入名称' },
                  { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
                ],
                nickname: [
                  { required: true, message: '请输入昵称' }
                ],
                sex: [
                  { required: true, message: '请选择性别' }
                ]
              },
              page5: {
                currentPage: 1,
                pageSize: 10,
                totalResult: 0
              },
            }
          },
          created () {
            this.$nextTick(() => {
              // 将表格和工具栏进行关联
              const $table = this.$refs.xTable;
              $table.connect(this.$refs.xToolbar);
              this.$refs.xTable.connect(this.$refs.xToolbar);
              this.findList();
            })
          },
          methods: {
            // 为表头的样式添加class
            headerCellClassName1() {
                return "background-color: #F8F8F9; height:45px;font-size:15px;color: #777;font-weight:600;"
            },
            filterRoleMethod ({ option, row }) {
              return row.address === option.data
            },
            filterAgeMethod ({ option, row }) {
              return row.age === Number(option.data)
            },
            findList () {
              this.loading = true
              return new Promise(resolve => {
                setTimeout(() => {
                  this.tableData = [
                     { id: 10001, phone:"13005113734", name: 'Test1', nickname: 'T1', role: 'Develop', sex: '0', sex2: ['0'], num1: 40, age: 28, address: 'Shenzhen', date: '2021-11-28 19:20:59', tiem: '19:20:59' },
                     { id: 10002, phone:"13005113734", name: 'Test2', nickname: 'T2', role: 'Designer', sex: '1', sex2: ['0', '1'], num1: 20, age: 22, address: 'Guangzhou', date: '2021-11-27 19:20:59', tiem: '19:20:59' },
                     { id: 10003, phone:"13005113734", name: 'Test3', nickname: 'T3', role: 'Test', sex: '0', sex2: ['1'], num1: 200, age: 32, address: 'Shanghai', date: '2021-11-29 19:20:59', tiem: '19:20:59' },
                     { id: 10004, phone:"13005113734", name: 'Test4', nickname: 'T4', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 23, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10005, phone:"13005113734", name: 'Test5', nickname: 'T5', role: 'Designer', sex: '0', sex2: ['0'], num1: 30, age: 13, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10006, phone:"13005113734", name: 'Test6', nickname: 'T6', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 23, address: 'Guangzhou', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10007, phone:"13005113734", name: 'Test7', nickname: 'T7', role: 'Designer', sex: '0', sex2: ['1'], num1: 30, age: 19, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10009, phone:"13005113734", name: 'Test8', nickname: 'T8', role: 'Designer', sex: '1', sex2: ['0'], num1: 30, age: 29, address: 'Guangzhou', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10010, phone:"13005113734", name: 'Test9', nickname: 'T9', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 36, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10011, phone:"13005113734", name: 'Test10', nickname: 'T10', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 23, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10012, phone:"13005113734", name: 'Test11', nickname: 'T11', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 21, address: 'Shanghai', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10013, phone:"13005113734", name: 'Test12', nickname: 'T12', role: 'Designer', sex: '0', sex2: ['0'], num1: 30, age: 28, address: 'Shanghai', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10014, phone:"13005113734", name: 'Test13', nickname: 'T13', role: 'Designer', sex: '0', sex2: ['1'], num1: 30, age: 23, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10015, phone:"13005113734", name: 'Test14', nickname: 'T14', role: 'Designer', sex: '1', sex2: ['0'], num1: 30, age: 85, address: 'Guangzhou', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10016, phone:"13005113734", name: 'Test15', nickname: 'T15', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 23, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10017, phone:"13005113734", name: 'Test16', nickname: 'T16', role: 'Designer', sex: '0', sex2: ['0'], num1: 30, age: 23, address: 'Shanghai', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10018, phone:"13005113734", name: 'Test17', nickname: 'T17', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 18, address: 'Guangzhou', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10019, phone:"13005113734", name: 'Test18', nickname: 'T18', role: 'Designer', sex: '0', sex2: ['1'], num1: 30, age: 18, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10020, phone:"13005113734", name: 'Test19', nickname: 'T19', role: 'Designer', sex: '1', sex2: ['0'], num1: 30, age: 23, address: 'Shanghai', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10022, phone:"13005113734", name: 'Test20', nickname: 'T20', role: 'Designer', sex: '0', sex2: ['1'], num1: 30, age: 20, address: 'Shanghai', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                     { id: 10023, phone:"13005113734", name: 'Test24', nickname: 'T21', role: 'Designer', sex: '1', sex2: ['0'], num1: 30, age: 25, address: 'Shenzhen', date: '2021-11-30 19:20:59', tiem: '21:13:23' },
                  ],
                  this.loading = false;
                  this.page5.totalResult = this.tableData.length;
                  this.tableData = this.tableData.slice((this.page5.currentPage - 1) * this.page5.pageSize, this.page5.currentPage * this.page5.pageSize);
                  resolve()
                }, 300)
              })
            },
            handlePageChange1 ({ currentPage, pageSize }) {
              console.log(currentPage);
              console.log(pageSize);
              this.page5.currentPage = currentPage
              this.page5.pageSize = pageSize
              this.findList()
            },
            customDateFilterMethod ({ option, row, column }) {
              if (option.data) {
                return XEUtils.isDateSame(row[column.property], option.data, 'yyyy-MM-dd')
              }
              return true
            },
            filterEvent (option) {
              const xTable = this.$refs.xTable
              // 设置为选中状态
              option.checked = true
              // 修改条件之后，需要手动调用 updateData 处理表格数据
              xTable.updateData()
            },
            formatterSex ({ cellValue }) {
              let item = this.sexList.find(item => item.value === cellValue)
              return item ? item.label : ''
            },
            visibleMethod ({ data }) {
              return data.flag1 === 'Y'
            },
            cellDBLClickEvent ({ row }) {
              this.editEvent(row)
            },
            insertEvent () {
              this.formData = {
                name: '',
                nickname: '',
                role: '',
                sex: '',
                age: '',
                num: '',
                checkedList: [],
                flag1: '',
                date3: '',
                address: ''
              }
              this.selectRow = null
              this.showEdit = true
            },
            editEvent (row) {
              this.formData = {
                name: row.name,
                nickname: row.nickname,
                role: row.role,
                sex: row.sex,
                age: row.age,
                num: row.num,
                checkedList: row.checkedList,
                flag1: row.flag1,
                date3: row.date3,
                address: row.address
              }
              this.selectRow = row
              this.showEdit = true
            },
            async removeEvent (row) {
              const type = await this.$XModal.confirm('您确定要删除该数据?')
              const $table = this.$refs.xTable
              if (type === 'confirm') {
                $table.remove(row);
                this.$XModal.message({ content: '删除成功', status: 'success' })
              }else{
                this.$XModal.message({ content: '删除失败', status: 'error' })
              }
            },
            submitEvent () {
              this.submitLoading = true
              setTimeout(() => {
                const $table = this.$refs.xTable
                this.submitLoading = false
                this.showEdit = false
                if (this.selectRow) {
                  this.$XModal.message({ content: '保存成功', status: 'success' })
                  Object.assign(this.selectRow, this.formData)
                } else {
                  this.$XModal.message({ content: '新增成功', status: 'success' })
                  $table.insert(this.formData)
                }
              }, 500)
            },
            funnelEvent () {
              this.$XModal.alert({ content: '点击事件' })
            }
          }
        }   
</script>

<style scoped>

.my-select {
  margin: 2px;
  width: 200px;
  height: 30px;
}
/** 表头背景样式 */
.table-headerBj {
  width: 100%;
  height: 60px;
  position:relative;
  left: 0%;
}
.table-headerBj img {
  width: 100%;
  height: 100%;
}
</style>
<style>
/** 去除表头默认的上下13px内边距*/ 
 .table_contert .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
 .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis), 
 .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
   padding: 0;
 }
</style>